<template>
	<view>
		<view v-show="netErrorFlag" class="net-error-msg" style="" :style="extendSty">
			<image src="../static/offline.png" style="width: 40rpx;padding-right: 10rpx;" mode="widthFix"></image>
			{{description}}
			<!-- <u-alert-tips :descStyle="{color:'#dd6c4c'}" type="error" icon="goingwangluocuowu" :showIcon="true" :description="description"></u-alert-tips> -->
		</view>
		<!-- 加载动画组件 -->
		<!-- <go-loading></go-loading> -->
		<!-- <u-toast type="error" ref="uToast"></u-toast> -->
	</view>
</template>

<script>
	export default {
		name: "network",
		data() {
			return {
				netErrorFlag: false,
				description: '网络连接发生问题，请检查网络连接',
			}
		},
		mounted() {
			//检测网络状态
			uni.getNetworkType({
				success: (res) => {
					this.showNetState(res.networkType);
				}
			});
			//监听网络状态变化
			uni.onNetworkStatusChange((res) => {
				this.showNetState(res.networkType);
			});
		},
		props: {
			hasTopBar: {
				type: Boolean,
				default: true
			},
		},
		computed: {
			extendSty() {
				let sty = {};
				if (this.hasTopBar === false) {
					sty["top"] = "25px";
				}
				return sty;
			}
		},
		methods: {
			//显示网络状态
			showNetState(state) {
				if (state === 'none') {
					this.netErrorFlag = true;
				} else {
					this.netErrorFlag = false;
				}
			}
		},
		watch: {
			flushInfoMsg(nval) {
				this.$refs.uToast.show({
					title: this.infoMsg,
					position: 'top',
					type: 'success',
				});
			},
			flushErrorMsg(nval) {
				this.$refs.uToast.show({
					title: this.errorMsg,
					position: 'top',
					type: 'error',
				});
			}
		}
	};
</script>
<style>
	.net-error-msg {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 999999;
		width: 100%;
		height: 80rpx;
		color: #DD6C4C ;
		background-color: #fcf0f0;
		padding-left: 20rpx;		
		vertical-align: middle;
		line-height: 80rpx;
	}
</style>
